<template>
  <div>
    <div class="wrapper">
      <nav class="phone-nav height">
        <i class="iconfont">&#xe669;</i>
        <span class="text">手机号登录</span>
      </nav>
      <div class="wrapper">
        <div class="info">未注册手机号登录后将自动创建账号</div>
        <div class="inp border-bottom" style="opacity: 1;">
          <span>+86</span>
          <input type="text" v-model="inpval" placeholder="请输入手机号" autofocus="autofocus" @keyup.13="goStep(inpval)"/>
          <i class="iconguanbi">×</i>
        </div>
        <div class="btn">
          <button @click="goStep(inpval)" class="label">下一步</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'phone',
  data () {
    return {
      inpval: null
    }
  },
  methods: {
    goStep (inpval) {
      const exp = /^1([38]\d|4[5-9]|5[0-35-9]|6[56]|7[0-8]|9[189])\d{8}$/
      if (exp.test(inpval)) {
        this.$axios.get(`/api/cellphone/existence/check?phone=${inpval}`).then(res => { // 反引号,有插入值
          console.log(res.data)
          if (res.data.code === 200) {
            if (res.data.nickname) {
              this.$router.push({ name: 'pwd', params: { phone: inpval } })
            } else { // 跳转到输入验证码界面
              this.$axios.get(`/api/captcha/sent?phone=${inpval}`).then(res => {
                console.log(res.data)
                if (res.data.code === 200) {
                  this.$router.push({ name: 'vd', params: { phone: inpval } })
                }
              })
            }
          }
        })
      } else {
        alert('请输入正确的手机号')
      }
    }
  },
  mounted () {

  }
}
</script>
<style lang="stylus" scoped>

input
  outline: 0 none;
  border: none;
.wrapper
  box-sizing: border-box
  padding: 0.23rem
  .phone-nav
    display: flex
    align-items: center
  .height
    height: 1rem
    line-height: 1rem
    .iconfont
      font-size: 0.7rem
      margin-right: 5px
    .text
      font-size: 0.4rem
      vertical-align: 5px
  .info
    width: 100vw
    height: 2rem
    display: flex
    align-items: center
    font-size: small
    color: #ccc
  .inp
    padding-bottom: 0.1rem
    display: flex
    align-items: center
    border-bottom 1px solid #ccc
    opacity .5 !important
    .iconguanbi
      font-size .28rem
    input
      height: 16px
      padding: 4px 0px
      font-size: 0.24rem
      margin-left: 10px
      -webkit-box-flex: 1
      flex: 1
      caret-color: red
  .btn
    display: flex;
    -webkit-box-pack: center
    justify-content: center
    -webkit-box-align: center
    align-items: center
    text-align: center
    #btn
      position: absolute
      clip: rect(0, 0, 0, 0)
    .label
      box-sizing: border-box
      margin-top: 30px
      padding: 8px
      border-radius: 20px
      line-height: 20px
      width: 80%
      color: #fff
      background: #dd001b
</style>
